<template>
	<view class="my_listcol flex flex_row_between">
		<view class="list">
			<view class="flex info " @click="detailPage">
				<image class="photo" src="../../static/image/1.png" mode="aspectFit"></image>
				<!-- <view class="flex flex_col_center" style="width: 100%;"> -->
				<view class="desc">
					<view class="price_top">
						<text class="red_font ten">￥7.00/斤</text>
						<my-stepper @showKey="$refs.keyboard.open()"></my-stepper>
					</view>
					<view class="list_name">
						<text class="name">{{data.name}}</text>
						<text class="des gray_font" v-if="url=='other'">{{data.describe}}</text>
						<text class="custom-icon custom-icon-xingxing" v-else style="color:orange"></text>
					</view>
					<view class="tag flex wrap flex_col_center" v-if="url=='other'">
						<text v-for="(item,index) in 2" class="red_tag">标签</text>
					</view>
					<view class="inventory">
						<text>起订量：10</text>
						<text>库存：200</text>
					</view>
				</view>
					<!-- <view class="tag flex wrap flex_col_center" v-if="url=='collect'">
						<text v-for="(item,index) in 2" class="red_tag">标签</text>
					</view> -->
				<!-- </view> -->
			</view>
			<!-- <view class="flex flex_col_center"> -->
					<!-- <my-stepper @showKey="$refs.keyboard.open()"></my-stepper> -->
				

				<!-- 	<view class="addone">
				<text class="plus">+</text>
			</view> -->
				<!-- 	<view class="addone" @click="$refs.cart.open()">
				<text class="custom-icon custom-icon-gouwu" ></text>
			</view> -->
			<!-- </view> -->
		</view>
		<my-keyboard ref="keyboard"></my-keyboard>
		<my-addcart ref="cart"></my-addcart>
	</view>
</template>

<script>
	export default {
		props: {
			url: {
				type: String,
				default: 'other'
			},
			data:Object
		},
		mounted(){
			
		},
		beforeUpdate(){
			
		},
		methods: {
			detailPage() {
				uni.navigateTo({
					url: `../../pages/index/shopdetail`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_listcol {
		box-sizing: border-box;
		.list{
			flex:1;
			padding: 20rpx 0;
			margin:0 30rpx;
			border-bottom: 1px solid #E7E8E8;
			display: flex;
			.info {
				flex-grow: 1;
				align-items: center;
				.photo {
					width: 112rpx;
					height: 112rpx;
					margin-right: 16rpx;
				}
			}
			.desc{
				flex:1;
				// font-size: 20rpx;
				>view+view{
					margin-top:4rpx;
				}
				.price_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.list_name{
					.name{
						font-size: 28rpx;
						color:#191919;
					}
					.des{
						font-size: 16rpx;
						color:#CCCCCC;
						margin-left:12rpx;
					}
				}
				.red_tag{
					font-size: 12rpx;
					padding:0 8rpx;
				}
				.inventory{
					color:#737373;
					font-size: 20rpx;
					>text+text{
						margin-left:20rpx;
					}
				}
			}


			.custom-icon-gouwu {
				color: $dgreen;
				font-size: 10px;
			}
			
		}
	}

	// @media(max-width:600px) {
	// 	.my_listcol {
	// 		padding: 28rpx 0;

	// 		.desc {
	// 			margin-right: 20rpx;
	// 		}

	// 		.addone {
	// 			border-radius: 50%;
	// 			text-align: center;
	// 			font-weight: bold;
	// 			background: $dgreen;
	// 			color: $white;
	// 			width: 34rpx;
	// 			height: 34rpx;
	// 			line-height: 30rpx;
	// 		}
	// 	}

	// 	/deep/ .my_stepper {
	// 		.minus,
	// 		.plus {
	// 			width: 34rpx;
	// 			height: 34rpx;

	// 		}

	// 		.minus {
	// 			line-height: 28rpx;
	// 		}

	// 		.plus {
	// 			line-height: 30rpx;
	// 		}
	// 	}

	// }
</style>
